<!-- 开启单选,可自定义高度 -->

<template>
	<div>
		<el-table
			:data="tableData"
			border
			style="width: 100%"
			ref="table"
			:height="curHeight"
			highlight-current-row
			@current-change="handleCurrentChange"
			:row-style="{ height: '40px' }"
			:cell-style="{ padding: '0' }"
		>
			<!-- 字段列展示 begin -->
			<el-table-column label="序号" align="center" width="60" fixed>
				<template slot-scope="scope">
					{{ scope.$index + 1 }}
				</template>
			</el-table-column>
			<!-- 列头只有一行，没有合并的情况 -->

			<!-- 列头有合并的情况 -->
			<el-table-column
				:prop="item.prop"
				:label="item.label"
				:width="item.width ? item.width : 'auto'"
				:align="item.align ? item.align : 'center'"
				v-for="(item, index) in tableColumn"
				:key="index"
			>
				<template slot-scope="scope">
					<slot :name="scope.row[item.prop]" :params="scope.row">
						{{
							item.dictName
								? getDictValue(item.dictName, scope.row[item.prop])
								: scope.row[item.prop]
						}}
					</slot>
				</template>
				<div v-if="item.children && item.children.length > 0">
					<el-table-column
						:prop="child.prop"
						:label="child.label"
						:width="child.width ? child.width : 'auto'"
						:align="child.align ? child.align : 'center'"
						v-for="(child, cIndex) in item.children"
						:key="cIndex"
					>
						<template slot-scope="scope">
							<slot :name="scope.row[child.prop]" :params="scope.row">
								{{
									child.dictName
										? getDictValue(child.dictName, scope.row[child.prop])
										: scope.row[child.prop]
								}}
							</slot>
						</template>
					</el-table-column>
				</div>
			</el-table-column>
			<!-- 字段列展示 end -->

			<!-- 操作按钮集合 begin -->
			<el-table-column
				v-if="tableBtn && tableBtn.length > 0"
				fixed="right"
				label="操作"
				:width="btnListWidth ?? tableBtn.length * 45"
			>
				<template slot-scope="scope">
					<el-button
						v-if="tableBtn.includes('edit')"
						@click.native.prevent="editRow(scope.$index, tableData)"
						type="text"
						size="small"
					>
						编辑
					</el-button>
					<el-button
						v-if="tableBtn.includes('view')"
						@click.native.prevent="viewRow(scope.$index, tableData)"
						type="text"
						size="small"
					>
						详情
					</el-button>
					<el-button
						v-if="tableBtn.includes('lookSMJ')"
						@click.native.prevent="lookSMJRow(scope.$index, tableData)"
						type="text"
						size="small"
					>
						查看扫描件
					</el-button>
					<el-button
						v-if="tableBtn.includes('delete')"
						@click.native.prevent="deleteRow(scope.$index, tableData)"
						type="text"
						size="small"
						style="color: red"
					>
						删除
					</el-button>
				</template>
			</el-table-column>
			<!-- 操作按钮集合 end -->
		</el-table>
		<div class="mcCommonPager" v-if="tableData && tableData.length > 0">
			<el-pagination
				background
				layout="prev, pager, next"
				:total="count"
				:page-size="size"
				:current-page="current"
				@current-change="pageChange"
			>
				>
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import { PopupCommon } from "@/libs/popupCommon"
	import { Utility } from "@/libs/utility"

	// pageNo 当前第几页
	// pageSize 每页条数

	export default {
		props: {
			/** 数据源：这里不确定字段，只要是数组就可以 */
			dataSource: {
				/** 这里不确定字段，只要是数组就可以 */
				type: Array,
				required: true,
			},
			/** 自定义列 */
			tableColumns: {
				/** 格式： [{prop:"",label:"",width:"",children:[{prop:"",label:"",width:""]}] 其中宽度可以不写，目前只支持列头合并两行的情况，暂未做动态循环配置。 */
				type: Array,
				required: true,
			},
			/** 操作按钮集合 */
			btnList: {
				/** 格式：['edit','view','delete','lookSMJ'] ，可以给空 */
				type: Array,
			},
			btnListWidth: {
				type: String,
				require: false,
			},
			/** 一页显示多少条数据 */
			pageSize: {
				type: Number,
				require: true,
			},
			/** 总共有多少条数据 */
			pageCount: {
				type: Number,
				require,
			},
			/** 当前第几页 */
			pageNo: {
				type: Number,
				require,
			},
			/** 高度 */
			height: {
				type: Number,
				require,
			},
		},
		computed: {
			tableData() {
				return this.dataSource
			},
			tableColumn() {
				return this.tableColumns
			},
			tableBtn() {
				return this.btnList
			},
			size() {
				return this.pageSize
			},
			count() {
				return this.pageCount
			},
			current() {
				return this.pageNo
			},
			curHeight() {
				return this.height
			},
		},
		methods: {
			getDictValue(dictType, dictValue) {
				let finishValue = dictValue
				const list = Utility.getDictList(dictType)
				if (
					list &&
					list.length > 0 &&
					typeof dictValue != "undefined" &&
					dictValue != null
				) {
					dictValue = dictValue.toString()
					if (dictValue.indexOf(",") != -1) {
						dictValue = dictValue.split(",")
						finishValue = list
							.filter((t) => dictValue.includes(t.value))
							.map((t) => t.label)
							.join(",")
					} else {
						const item = list.find((t) => t.value == dictValue)
						if (typeof item != "undefined") {
							finishValue = item.label
						}
					}
				}
				return finishValue
			},
			editRow(i, d) {
				const data = {
					index: i,
					data: d[i],
				}
				this.$emit("editRow", data)
			},
			viewRow(i, d) {
				const data = {
					index: i,
					data: d[i],
				}
				this.$emit("viewRow", data)
			},
			lookSMJRow(i, d) {
				const data = {
					index: i,
					data: d[i],
				}
				this.$emit("lookSMJRow", data)
			},
			deleteRow(i, d) {
				PopupCommon.confirm("此操作将删除该数据, 是否继续?")
					.then(() => {
						const data = {
							index: i,
							data: d[i],
						}
						this.$emit("deleteRow", data)
					})
					.catch(() => {
						// 这里尽量写下，否则会报警告异常。
						console.log("已取消删除")
					})
			},
			// 页码点击事件,p当前页
			pageChange(p) {
				this.$emit("pageChange", p)
			},
			/** 改变选中行的值 */
			handleCurrentChange(val) {
				this.$emit("tableSingleRowHandleSelectionChange", val)
			},
		},
		mounted() {},
	}
</script>

<style scoped>
	.mcCommonPager {
		margin-top: 10px;
		background-color: #fff;
		padding: 5px 0;
	}
</style>
